<template>
    <Form :model="app" label-position="top" @submit.native.prevent id="basic_usage" ref="baseInfoForm" :rules="baseRule">
        <Row :gutter="16">
            <Col span="12">
                <FormItem label="项目地址" prop="gitLabProject.namespace.id" class="item-inline">
                    <Input v-model="gitLab.gitLabUrl" class="append-input" disabled style="width: 220px"></Input>
                    <Select v-model="app.gitLabProject.namespace.id" class="namespace" style="width: calc(100% - 220px)">
                        <OptionGroup v-for="(namespaceList, key) in namespaceMap" :key="key" :label="key">
                            <Option v-for="item in namespaceList" :key="item.id" :value="item.id">{{ item.name }}</Option>
                        </OptionGroup>
                    </Select>
                </FormItem>
            </Col>
            <Col span="12">
                <FormItem label="项目名" prop="appInfo.appName">
                    <Input v-model="app.appInfo.appName" placeholder="my-awesome-project"></Input>
                </FormItem>
            </Col>
        </Row>
        <Row :gutter="16">
            <Col span="12">
                <FormItem label="项目中文名称" prop="appInfo.appNameChs">
                    <Input v-model="app.appInfo.appNameChs" placeholder="项目名"></Input>
                </FormItem>
            </Col>
            <Col span="12">
                <FormItem label="项目包名" prop="appInfo.packages">
                    <Input v-model="app.appInfo.packages" placeholder="com.mdo.demo"></Input>
                </FormItem>
            </Col>
        </Row>
        <FormItem label="描述">
            <Input v-model="app.appInfo.description" type="textarea" :rows="3" :autosize="{ minRows: 3, maxRows: 3 }"
                   placeholder="项目描述（可选）"></Input>
        </FormItem>
        <FormItem label="公开等级" prop="gitLabProject.visibility">
            <RadioGroup v-model="app.gitLabProject.visibility">
                <Radio label="private" style="margin-right: 32px">Private</Radio>
                <Radio label="internal" style="margin-right: 32px">Internal</Radio>
                <Radio label="public">Public</Radio>
            </RadioGroup>
        </FormItem>
    </Form>
</template>

<script>
    export default {
        data() {
            return {
                app: {
                    appInfo: {
                        appName: '',
                        packages: '',
                        components: '',
                        description: '',
                        appNameChs: '',
                        appType: '0'
                    },
                    gitLabProject: {
                        namespace: {
                            id: null
                        },
                        visibility: 'private'
                    },
                    withGitLab: true
                },
                baseRule: {
                    'appInfo.appName': [{
                        required: true, message: '项目名不能为空', trigger: 'blur'
                    }],
                    'appInfo.appNameChs': [{
                        required: true, message: '项目中文名称', trigger: 'blur'
                    }],
                    'appInfo.packages': [{
                        required: true, message: '项目包名不能为空', trigger: 'blur'
                    }],
                    'gitLabProject.visibility': [{
                        required: true, message: '项目公开等级不能为空', trigger: 'change'
                    }],
                    'gitLabProject.namespace.id': [{
                        required: true, message: '项目地址不能为空', trigger: 'change', validator:(rule, value, callback)=>{
                            if (this.app.gitLabProject.namespace.id !== null) {
                                callback();
                            } else {
                                callback(new Error(rule.message));
                            }
                        }
                    }]
                }
            };
        },
        props: {
            gitLab: Object
        },
        computed: {
            namespaceMap() {
                let map = {};
                if (this.gitLab && this.gitLab.namespaceList) {
                    this.gitLab.namespaceList.forEach(item => {
                        map[item.kind]?map[item.kind].push(item):(map[item.kind] = [item]);
                    });
                    return map;
                } else {
                    return null;
                }
            }
        },
        created() {
            this.$emit('changeApp', this.app);
        },
        methods: {
            getData() {
                return new Promise((resolve) => {
                    this.$refs['baseInfoForm'].validate(valid => {
                        if (valid) {
                            resolve(this.app);
                        }
                    });
                });
            }
        },
        watch:{
            app: {
                handler(val) {
                    this.$emit('changeApp', val);
                },
                deep: true
            }
        }
    };
</script>